<template>
  <MainLayout>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">联系我们</div>
        <div class="forum-header-content">
          预订演示、请求功能、报告错误、获得社区支持<br />或联系我们的团队提供帐户和账单帮助。
        </div>
      </div>
    </section>
    <section class="type-section">
      <div class="container">
        <div class="type-list">
          <div class="type-list-item" v-for="item in typeList" :key="item.title">
            <div class="type-list-item-title">{{ item.title }}</div>
            <div class="type-list-item-content">{{ item.content }}</div>
            <div class="type-list-item-list">
              <div class="type-list-item-list-item" v-for="listItem in item.list" :key="listItem">
                <img :src="item.icon" alt="" /> {{ listItem }}
              </div>
            </div>
            <div class="type-list-item-btn">
              <div class="type-list-item-btn-txt" @click="jump(item.path)">
                <img v-if="item.btnIcon" :src="item.btnIcon" alt="" />
                {{ item.btn }}
              </div>
            </div>
          </div>
        </div>
        <div class="type-tips">
          <div class="type-tips-content">
            <div class="type-tips-title">媒体和伙伴关系</div>
            <div class="type-tips-desc">
              如有任何与媒体合作、新闻和伙伴关系相关的查询，请联系我们。<br />伸出手来，让我们一起努力
            </div>
          </div>
          <div class="type-tips-btn" @click="jump('/business/contact')">联系我们</div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  let typeList = [
    {
      title: "创建企业票据",
      content: "如果您对您的帐户、付款或故障排除有任何疑问，请联系我们。",
      list: ["账户", "卡发票", "故障排除"],
      btn: "联系支持",
      icon: "/images/index/callme/duihao-1.png",
      path: "/business/support",
    },
    {
      title: "商业解决方案",
      content: "查看 AnyRender 的运行，并获得关于哪种计划适合您的业务的建议。",
      list: ["团队合作", "优化的工作流程", "定制请求", "预约演示"],
      btn: "我们谈谈吧",
      icon: "/images/index/callme/duihao-2.png",
      path: "/business/contact",
    },
    {
      title: "社区支持",
      content: "加入我们的V-foxcord服务器，分享想法获取答案和最新消息。",
      list: ["一般聊天", "测试版测试", "请求功能", "报告问题"],
      btn: "加入社区",
      btnIcon: "/images/index/callme/joinClub.png",
      icon: "/images/index/callme/duihao-3.png",
      path: "/resources/forum",
    },
  ];
  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0;

    .container {
      .forum-header-title {
        font-size: 64px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 3px;
      }
      .forum-header-content {
        margin: 20px auto;
        width: 50%;
        line-height: 2;
        text-align: center;
        font-size: 16px;
        color: #585858;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 38px;
          letter-spacing: 1px;
        }
        .forum-header-content {
          margin-top: 20px;
          font-size: 14px;
          width: 80%;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
      }
    }
  }

  .find-btn {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 8px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 20px auto;
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }

  .type-section {
    padding: 20px 0 200px;
    .container {
      .type-list {
        display: flex;
        justify-content: space-between;
        .type-list-item {
          width: calc(33.33% - 30px);
          border-radius: 17px;
          padding: 20px;
          border: 1px solid #cccccc;
          background-color: #f7f7f7;
          .type-list-item-title {
            font-size: 20px;
            font-weight: 500;
            color: #000;
            margin-bottom: 20px;
          }
          .type-list-item-content {
            font-size: 16px;
            color: #585858;
          }
          .type-list-item-list {
            min-height: 200px;
            .type-list-item-list-item {
              font-size: 16px;
              color: #000;
              margin-top: 15px;
              img {
                width: 20px;
                height: 20px;
                margin-right: 6px;
              }
            }
          }
          .type-list-item-btn {
            padding: 10px 30px;
            border-radius: 10px;
            margin-top: 20px;
            text-align: center;
            background-color: #000;
            cursor: pointer;
            .type-list-item-btn-txt {
              font-size: 16px;
              color: #fff;
              img {
                width: 20px;
                height: 20px;
                margin-right: 6px;
                vertical-align: middle;
              }
            }
          }
          &:nth-child(2) {
            background: linear-gradient(to right bottom, #7748f0, #521ee3, #5428c7);
            border: 1px solid #8c51fb;
            .type-list-item-title {
              color: #fff;
            }
            .type-list-item-content {
              color: #fff;
            }
            .type-list-item-list {
              .type-list-item-list-item {
                color: #fff;
              }
            }
            .type-list-item-btn {
              background-color: #fff;
              .type-list-item-btn-txt {
                color: #703ffa;
              }
            }
          }
          &:nth-child(3) {
            background-color: #fcfcfc;
            .type-list-item-btn {
              background-color: #703ffa;
            }
          }
        }
      }
      .type-tips {
        margin-top: 20px;
        padding: 20px;
        background-color: #595959;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: end;
        .type-tips-content {
          font-size: 16px;
          color: #fff;
          .type-tips-title {
            font-weight: 600;
            line-height: 1.6;
          }
          .type-tips-desc {
            line-height: 28px;
          }
        }
        .type-tips-btn {
          padding: 10px 30px;
          border-radius: 10px;
          margin-top: 20px;
          min-width: 220px;
          text-align: center;
          background-color: #fff;
          color: #000;
          cursor: pointer;
        }
      }
      // 响应式 大屏幕
      @media (max-width: $breakpoint-xl) {
        .type-list {
          .type-list-item {
            width: calc(33.33% - 10px);
            padding: 20px;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .type-list {
          flex-wrap: wrap;
          gap: 30px;
          .type-list-item {
            width: 100%;
          }
        }
        .type-tips {
          flex-direction: column;
          align-items: flex-start;
          .type-tips-content {
            font-size: 16px;
          }
          .type-tips-btn {
            min-width: 150px;
            padding: 6px 30px;
          }
        }
      }

      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .type-list {
          gap: 20px;
          .type-list-item {
            .type-list-item-list {
              min-height: 150px;
            }
          }
        }
      }
    }
  }
</style>
